<template>
	<!-- 自定义表单详情 -->
	<view class="page" :style="{ '--color': color }">
		<status-bar :title="title" hideBg :goHome="fromShare"></status-bar>
		<formList
			v-if="form_list"
			:ids="form_list"
			info="true"
			barTitle="1"
			@title="getTitle"
			@shareImg="getShareImg"></formList>
		<empty v-else type="1" cat="4" msg="表单参数有误!!!"></empty>

		<!-- <view class="my-record thmeBg" @click='toRecord' >
			<image :src="staticUrl+'/images/jh_up/reserve.png'" mode="widthFix"></image>
		</view> -->

		<view class="my-record thmeBg" @click="handleShare">
			<text class="iconfont icon-fenxiang size32"></text>
		</view>

		<showModel @cancelFunc="showModal = false" v-if="showModal" type="2"></showModel>
		<SharePoster
			v-if="showShareQr"
			:myid="ordId"
			type="8"
			:pageType="'16&gid=' + ordId"
			@closePoster="showShareQr = false"></SharePoster>
	</view>
</template>
<script>
	import { mapState } from 'vuex';
	import formList from '../../components/formList.vue';
	import SharePoster from '@/components/sharePoster.vue';
	export default {
		components: {
			formList,
			SharePoster,
		},
		data() {
			return {
				showModal: false,
				fromShare: 0, // 是否来自分享 1是 显示返回首页
				form_list: '', // 自定义表单id
				title: ' ',
				staticUrl: this.staticUrl,
				ordId: '',
				showShareQr: false,
				shareImg: '',
			};
		},
		onLoad(options) {
			if (options.ordId) {
				this.form_list = [{ order_id: options.ordId }];
				this.ordId = options.ordId;
			}
			if (options.fromShare) this.fromShare = options.fromShare;
		},
		// onShow() {
		// 	var that = this;
		// 	if(!this.vid) return this.showModal = true;
		// },

		methods: {
			getTitle(e) {
				this.title = e;
			},
			getShareImg(e) {
				this.shareImg = e;
			},
			toRecord() {
				var that = this;
				uni.getStorage({
					key: 'vid',
					success(res) {
						if (!res.data || res.data == 0) {
							that.showModal = true;
						} else {
							uni.navigateTo({
								url: '/pages/reserve/myRreserve',
							});
						}
					},
					fail() {
						that.showModal = true;
					},
				});
			},
			handleShare() {
				// 分享海报
				if (!this.vid) return (this.showModal = true);
				this.showShareQr = true;
			},
		},
		computed: {
			...mapState(['color', 'vid', 'share']),
		},
		onShareAppMessage() {
			return {
				title: this.title,
				path:
					'/pages/index/index?share_v_id=' +
					this.vid +
					'&pageType=16&gid=' +
					this.form_list[0].order_id,
			};
		},
		onShareTimeline() {
			return {
				title: this.title,
				query: `share_v_id=${this.vid}&ordId=${this.form_list[0].order_id}&fromShare=1`,
				imageUrl: this.$imgUrls(this.shareImg || this.share.imageUrl),
			};
		},
	};
</script>

<style lang="scss">
	page {
		background-color: $pages !important;
	}
</style>
<style scoped lang="scss">
	.page {
		padding-bottom: 30rpx;
		background-color: $pages !important;
		.my-record {
			position: fixed;
			right: 0;
			height: 65upx;
			top: 340upx;
			border-radius: 30upx 0 0 30upx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			font-size: 24upx;
			padding: 4upx 10upx 4upx 26upx;
			image {
				width: 40upx;
				height: 44upx;
				margin-right: 4upx;
			}
		}
	}
</style>
